<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8"/>
    <title>{{ config('amis.login.title') }}登录</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="icon" type="image/x-ico" href="{{ config('amis.logo') }}"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>

    <link rel="stylesheet" title="default" href="{{asset('storage/amis/sdk.css')}}"/>
    <link rel="stylesheet" href="{{asset('storage/amis/helper.css')}}"/>
    <link rel="stylesheet" href="{{asset('storage/amis/iconfont.css')}}"/>

    <link rel="stylesheet" href="{{asset('storage/amis/' . config('amis.amis_theme','sdk'). '.css')}}">
    <style>
        html,
        body,
        .app-wrapper {
            position: relative;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            touch-action: pan-y;
        }

        @if(!preg_match('/(iPhone|iPad|iPod|Android|webOS|BlackBerry|Windows Phone)/i', Request()->header('User-Agent')))
        .app-wrapper {
            background: url("{{ config('amis.login.bg') }}") no-repeat;
            background-size: cover;
        }

        @endif

        :root {
            --Form-item-gap: 1.3rem;
            --InputGroup-height: 2.5rem;
            --Button-height: 2.5rem;
            --InputGroup-paddingX: .6rem;
            --InputGroup-addOn-bg: var(--Form-input-bg);
            /* --fontSizeBase: .9rem; */
        }

        .amis-scope .cxd-Icon {
            height: 1rem
        }

        .amis-scope .cxd-TextControl-input {
            height: 40px;
        }

        .amis-scope .cxd-TextControl-input input {
            height: 100% !important;
        }

        .amis-scope .cxd-TextControl-input:hover {
            border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor)
        }

        .amis-scope .cxd-InputGroup .cxd-TextControl-input {
            border-left-width: 0;
            padding-left: 0;
        }

        .code_img {
            cursor: pointer;
        }

        /* 配置样式 */
        .login_layout {
        @if(!preg_match('/(iPhone|iPad|iPod|Android|webOS|BlackBerry|Windows Phone)/i', Request()->header('User-Agent')))
                  /* 仅 pc 生效 */
            /* 宽度 默认 400px */
            width: {{ config('amis.login.width','400px') }};
            /* 登录窗口靠左还是靠右 */
            @if(config('amis.login.align') == 'left')
                      left: 0;
            @else
                      right: 0;
        @endif
            /*  是否浮动  */
            @if(config('amis.login.float') == 'left')
                border-radius: 2px;
                margin: 10rem 6rem !important;
                height: auto;
            @else
                padding-top: 8rem !important;
                height: 100vh;
        @endif
    @endif

        }
    </style>
</head>
<body>
<div id="root" class="app-wrapper"></div>

<script src="{{asset('storage/amis/sdk.js')}}"></script>
<script src="https://unpkg.com/vue@2"></script>
<script src="https://unpkg.com/history@4.10.1/umd/history.js"></script>
<script type="text/javascript">
    (function () {
        let amis = amisRequire('amis/embed');
        // 通过替换下面这个配置来生成不同页面
        let amisJSON = {
            "type": "wrapper",
            "className": "fixed login_layout m:h-screen m:w-full bg-gray-50",
            "body": {
                "type": "form",
                "className": "h-full pc:p-9 m:p-4 m:pt-20",
                "api": {
                    "method": "post",
                    "url": "{{ url( config('amis.tpl.admin_login_page') . '/login') }}",
                    "adaptor": function (data) {
                        if (data.status != 0) {
                            refresh_code();
                        } else {
                            window.location.href = '{{ url(config('amis.tpl.admin_login_page') .'/index' ) }}';
                        }
                        return data;
                    },
                    "headers": {
                        "user-type": "admin"
                    }
                },
                "wrapWithPanel": false,
                "body": [
                    {
                        "type": "html",
                        "className": "text-center",
                        "html": "<div><image class='w-7 ' src='{{ config('amis.logo') }}'></image><span class='font-normal text-2xl pl-2.5'>{{ config('amis.login.title') }}</span></div>"
                    },
                    {
                        "type": "input-group",
                        "label": "",
                        "body": [
                            {
                                "type": "icon",
                                "icon": "/storage/icon/shield-user-line.svg"
                            },
                            {
                                "type": "input-text",
                                "label": false,
                                "placeholder": "用户名",
                                "name": "username",
                            }
                        ]
                    },
                    {
                        "type": "input-group",
                        "label": "",
                        "body": [
                            {
                                "type": "icon",
                                "icon": "/storage/icon/lock-password-line.svg",
                            },
                            {
                                "type": "input-password",
                                "label": false,
                                "placeholder": "密码",
                                "name": "password",
                            }
                        ]
                    },
                    @if(config('amis.login.captcha') == 1)
                    {
                        "type": "input-group",
                        "label": "",
                        "body": [
                            {
                                "type": "icon",
                                "icon": "/storage/icon/shield-check-line.svg"
                            },
                            {
                                "type": "input-text",
                                "label": false,
                                "placeholder": "验证码",
                                "name": "captcha",
                            },
                            {
                                "type": "action",
                                "body": {
                                    "type": "image",
                                    "height": "38px",
                                    "width": "110px",
                                    "name": "codeUrl",
                                    "imageClassName": "code_img b-none",
                                    "imageMode": "original",
                                    "src": "{{ captcha_src() }}"
                                },
                                // 点击图片 刷新二维码
                                "onClick": "refresh_code()"
                            }
                        ]
                    },
                    @endif
                    {
                        "label": "登 录",
                        "type": "action",
                        "actionType": "submit",
                        "level": "primary",
                        "className": "w-full h-8",
                    },
                    {
                        "type": "html",
                        "className": "text-center",
                        "html": "<p class='mt-10 text-gray-600'>{{ config('amis.login.footer') }}</p>"
                    },
                ]

            }

        };
        let amisScoped = amis.embed('#root', amisJSON);
    })();

    // 刷新验证码
    function refresh_code() {
        //图片后缀随机数
        document.querySelector('.code_img').src = '{{Captcha::src()}}?' + Math.random();
    }
</script>
</body>
</html>
